<template>
  <div class="">
    <CityHeader></CityHeader>
    <CitySearch :cities="cities"></CitySearch>
    <List
      :letter="letter"
      :cities="cities"
      :hot="hotCities"></List>
    <cityAlphabet
      @change="handleLetterChange"
      :cities="cities"></cityAlphabet>
  </div>
</template>

<script>
import axios from 'axios'
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import List from './components/List'
import cityAlphabet from './components/Alphabet'

export default {
  name: 'City',
  components: {CityHeader, CitySearch, List,
    cityAlphabet},
  data() {
    return {
      cities: {},
      hotCities: [],
      letter:""
    }
  },
  methods:{
    getCityInfo(){
      axios.get('/api/city.json')
        .then((this.handleGetCityInfoSucc))
    },
    handleGetCityInfoSucc(res){
      // console.log(res)
      res = res.data
      if (res.ret && res.data){
        const data = res.data
        this.cities = data.cities
        this.hotCities = data.hotCities
      }
    },
    handleLetterChange(letter){
      this.letter = letter
      // console.log(letter)
    }
  },
  mounted() {
    this.getCityInfo()
  }
}
</script>

<style lang="stylus" scoped>

</style>
